<template>
  <!-- 封装一下betterscroll -->

  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import bscroll from "@better-scroll/core";
import ObserveDOM from "@better-scroll/observe-dom";
import Pullup from "@better-scroll/pull-up";
bscroll.use(ObserveDOM);
bscroll.use(Pullup);
export default {
  name: "Scroll",
  props: {
    probeType: {
      type: String,
      default: "0"
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      scroll: null
    };
  },
  mounted() {
    //   this.$refs.value拿到得是dom元素 保持唯一性
    this.scroll = new bscroll(this.$refs.wrapper, {
      //  加这个属性才可以实现滚动
      observeDOM: true,
      click: true,
      bounceTime: 3000,
      //设置一个props值，有需要监听position的调用者传个3进来 没有需要的调用者就穿0 提高性能
      probeType: parseInt(this.probeType),
      // 同理 需要上拉加载的再把这个属性设置true 不然每次都会回调一个函数 降低性能
      pullUpLoad: this.pullUpLoad
    });

    // 监听滚动位置 并向调用者发送
    this.scroll.on("scroll", position => {
      this.$emit("scrollPosition", position);
    });

    // 监听上拉事件 拉倒底部的时候发送事件给父组件
    if (this.pullUpLoad) {
      this.scroll.on("pullingUp", () => {
        // 拉到底部 发送自定义事件
        this.$emit("scrollPullingUp");
      });
    }
  },
  methods: {
    // 封装一下回到顶部的方法
    scrollTo(x, y, time = 500) {
      this.scroll.scrollTo(x, y, time);
    },

    // 封装完成滚动、刷新操作
    finishPullingUp() {
      // 刷新一下betterscroll 不然滚不动
      this.scroll.refresh();
      // 继续激活下拉操作
      this.scroll.finishPullUp();
    },
    getScrollY() {
      return this.scroll.y;
    },
    refresh() {
      console.log("refresh执行了");
      this.scroll.refresh();
    }
  },

};
</script>

<style scoped></style>
